<template>
  <h1>稿件类别图示</h1>

  <header><div id="tree" style="width: 100%"></div></header>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
// 树图数据
const treeData = {
  name: "期刊类别",
  children: [
    {
      name: "计算机技术",
      children: [
        {
          name: "基于SpringCloud的“芸窗”期刊采编系统",
        },
      ],
    },
    {
      name: "环境工程",
      children: [
        {
          name: "环境治理系统设计",
        },
      ],
    },
  ],
};

// 树图组件
onMounted(() => {
  var tree = echarts.init(document.getElementById("tree"));
  tree.setOption({
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
    },

    series: [
      {
        type: "tree",
        id: 0,
        name: "tree1",
        data: [treeData],
        top: "10%",
        left: "8%",
        bottom: "22%",
        right: "20%",
        symbolSize: 7,
        edgeShape: "polyline",
        edgeForkPosition: "63%",
        initialTreeDepth: 3,
        lineStyle: {
          width: 2,
        },
        label: {
          backgroundColor: "#fff",
          position: "left",
          verticalAlign: "middle",
          align: "right",
        },
        leaves: {
          label: {
            position: "right",
            verticalAlign: "middle",
            align: "left",
          },
        },
        emphasis: {
          focus: "descendant",
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750,
      },
    ],
  });
  window.addEventListener("resize", function () {
    tree.resize();
  });
});
</script>
<style scoped>
header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 盒子之间留有间隔 */
  height: 600px;
}

h1 {
  color: var(--jiqiu-color);
}
</style>
